<template>
  <div
    class="main-container container-fluid page-holder"
    :class="{ 'container-limited': !curContrib.oldResource }"
  >
    <breadcrumb />
    <div :style="loading ? 'height: 4rem;' : 'display: none;'" v-loading="loading"></div>
    <template v-if="curContrib.id">
      <header-state />
      <h2>{{ curContrib.title }}</h2>
      <p>{{ curContrib.desc }}</p>
      <timeago2 :date-time="curContrib.updated_at" pre-text="更新于" class="info-deep" />
      <state-control-box @updated="loadContribution" class="m-t-16" />
      <el-row class="m-t-16" :gutter="16">
        <el-col v-if="curContrib.oldResource" :span="12">
          <resource-card
            :label="(curContrib.accepted || curContrib.closed) ? '被修改版本' : '当前版本'"
            :item="curContrib.oldResource"
          />
        </el-col>
        <el-col :span="curContrib.oldResource ? 12 : 24">
          <resource-card label="提交版本" :item="curContrib.newResource"/>
        </el-col>
      </el-row>
      <comments
        :placement="$C.comments.placement.ctrb"
        :placement-id="curContrib.id"
        :placement-author-id="curContrib.author.id"
      />
    </template>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { formatContribution } from '@/views/contributions/format';
import HeaderState from '@/views/contributions/components/header-state';
import StateControlBox from '@/views/contributions/components/state-control-box';
import ResourceCard from '@/views/contributions/components/resource-card';
import Comments from '@/components/shared/comments';

export default {
  name: 'ContributionsShow', // 贡献展示
  components: {
    HeaderState,
    StateControlBox,
    ResourceCard,
    Comments,
  },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    ...mapState({
      curContrib: 'currentContribution',
    }),
    // 获取贡献数据所需参数
    loadContributionParams() {
      return {
        spaceId: this.$route.params.spaceId,
        contribId: this.$route.params.contribId,
      };
    },
  },
  created() {
    this.loading = true; // 这里不放在load里面是因为接受或者关闭按钮会调用load，按钮本身有load
    this.loadContribution();
  },
  destroyed() { this.setCurContrib(); },
  methods: {
    ...mapActions({
      setCurContrib: 'setCurrentContribution',
    }),
    // 加载贡献数据
    loadContribution() {
      // 这里不设置loading是因为接受或者关闭按钮会调用load，按钮本身有load
      this.$api.spaceContributions.show(this.loadContributionParams)
        .then(res => this.setCurContrib(formatContribution(res.data)))
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
  watch: {
    loadContributionParams() {
      this.setCurContrib();
      this.loadContribution();
    },
  },
};
</script>

<style></style>
